<template>
    <el-row>
            <el-col :span="1" v-for="(tab,index) in tabs">
                <el-link :underline="false" type="primary" @click="projectSearch(index)">{{tab}}</el-link>
            </el-col>
            <el-col :span="10"></el-col>
            <el-col :span="4">
                <el-input v-model="input" placeholder="项目搜索" clearable />
            </el-col>
            <el-col :span="2">
            
                <el-button type="primary" @click="search">  
                    <el-icon><Search /></el-icon>Search
                </el-button>
            </el-col>
            <el-col :span="2">
            
                <el-button  type="success" @click="addTask">  
                    <el-icon><Plus /></el-icon>新增
                </el-button>
            </el-col>
        </el-row>
        <el-divider />
        <el-table :data="tableData"
        style="width: 100%"
        height="250"
        :default-sort = "{prop: 'serialNumber', order: 'ascending'}"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="serialNumber" sortable label="序号" width="120" />
            <el-table-column prop="taskName" label="任务名称" width="150" />
            <el-table-column prop="name" label="任务执行人" width="120" />
            <el-table-column prop="startTime" label="计划开始周期" width="120" />
            <el-table-column prop="endTime" label="计划结束周期" width="120" />
            <el-table-column prop="duration" label="工期" width="100" />
            <el-table-column label="进度" width="120" >
                <template #default="scope">
                    <el-progress :percentage="scope.row.progress" />
                </template>
            </el-table-column>
            <el-table-column prop="overDue" label="逾期" width="120" />
            <el-table-column label="操作" fixed="right">
                <template #default="scope">
                    <el-button size="small" circle @click="handleEdit(scope.$index, scope.row)"
                    >
                        <Edit style="width: 1em; height: 1em; " />
                    </el-button>      
                    <el-button 
                    size="small"
                    type="danger" 
                    @click="handleDelete(scope.$index, scope.row)"
                    circle >
                    <el-icon><Delete /></el-icon>
                    </el-button> 
                </template>
            </el-table-column>
            
        </el-table>
        <el-row>
            <el-col :span="4"></el-col>
            <el-col :span="10">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="5"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
                </el-pagination>
            </el-col>
        
        </el-row>
</template>
<script>
export default{
    data(){
        return{
            tabs:['全部','已完成','未完成'],
            input:'',//搜搜
            status:"exception",//项目进度
            multipleSelection: [],//选中的项
            tableData:[
                {serialNumber:'1',taskName:'创建项目',name:'诸葛孔明',startTime:'2023-2-2',endTime:'2023-2-2',duration:'1',progress:'5',overDue:'是'},
                {serialNumber:'2',taskName:'创建项目',name:'诸葛孔明',startTime:'2023-2-2',endTime:'2023-2-2',duration:'1',progress:'5',overDue:'是'},
                {serialNumber:'3',taskName:'创建项目',name:'诸葛孔明',startTime:'2023-2-2',endTime:'2023-2-2',duration:'1',progress:'5',overDue:'是'},
                {serialNumber:'4',taskName:'创建项目',name:'诸葛孔明',startTime:'2023-2-2',endTime:'2023-2-2',duration:'1',progress:'5',overDue:'否'},
                
            ],
            currentPage4: 1
        }
    },
    methods:{
        //给定条件搜索项目展示
        projectSearch(index){

        },
        //模糊搜索项目
        search(){

        },
        addTask(){
          
        },
        //选中
        handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
}
</script>
<style>
</style>